<template>
    <div class="upload-statement">
        <div class="statement-alert" v-if="!colseTip">
            <Alert class="statement-alert" type="warning" show-icon closable @on-close="colseTipHandle">
                <p class="title">上传非标准结算单要求</p>
                <div slot="desc">
                <p class="desc">1. 可以上传从ERP、DMS等维修管理系统导出的维修结算单;</p>
                <p class="desc">2. 可以上传企业自定维修结算单;</p>
                <p class="desc">3. 维修结算单必须要有VIN码(车架号);</p>
                <p class="desc">结算单上传后，系统需要1-2天时间进行数据转换。如果表单存在数据严重缺失如缺少VIN码、维修项目、车辆信息，结算单标准化不成功，维修记录将不能同步到汽车电子健康档案系统。</p>
                </div>
            </Alert>
        </div>

        <div :class="['content-box', {'margin-t-0': colseTip}]">
            <div class="c-header">上传非标准结算单</div>
            <import-files
				multiple 
				name="xlsx" 
				type="drag"
				ref="upload"
				:max-size="1500"  
				:action="$api.statement.upload.url" 
				:format="['xlsx', 'xls']" 
				:show-upload-list="true" 
				:headers="{Authorization: 'ca6452f84015b07197815653a8505fb783f8599c6e8eaf38cc4b37cf68db7e80'}"
				:on-success="onSuccess"
            ></import-files>
        </div>

        <div class="content-box">
            <div class="c-header">非标准结算单上传历史</div>
            <div class="c-content">
                <i-tabs :animated="false" @on-click="tabChange">
                    <i-tab-pane label="标准化中">
                        <in-standard ref="inStandard"></in-standard>
                    </i-tab-pane>
                    <i-tab-pane label="标准化完成">
                        <yet-standard ref="yetStandard"></yet-standard>
                    </i-tab-pane>
                    <i-tab-pane label="标准化失败">
                        <fail-standard ref="failStandard"></fail-standard>
                    </i-tab-pane>
                </i-tabs>
            </div>
        </div>
    </div>
</template>

<script>
    import ImportFiles from 'components/commons/ImportFiles';   //文件上传
    import BFooter from 'components/BFooter';  //页脚
    import InStandard from './InStandard';  // 标准中
    import YetStandard from './YetStandard';  // 已标准
    import FailStandard from './FailStandard';  // 标准失败
    export default {
        components: { ImportFiles, BFooter, InStandard, YetStandard, FailStandard },
        data(){
            return {
                colseTip: false,        // 是否关闭了提示
            }
        },
        mounted(){
            this.init();
        },
        methods: {
            init(){
                this.colseTip = this.$utils.Storage.getObj('UPLOAD_STATEMENT_TIP');
                this.tabChange(0);
            },
            colseTipHandle(){
                this.colseTip = true;
                this.$utils.Storage.setObj('UPLOAD_STATEMENT_TIP', this.colseTip);
            },
            onSuccess(res, _file){	//上传成功
				if(res.status === false){
                    _file.status = 'normal';
					this.$refs.upload.startUpload(_file, this.$api.statement.uploadN.url);
				}
            },
            tabChange(index){
                let refName = index === 0 ? 'inStandard' : index === 1 ? 'yetStandard' : 'failStandard';
                this.$refs[refName].init();
            }
        }
    }
</script>

<style lang="less">
    .upload-statement{
        padding: 30px;
        .statement-alert{
            width: 100%;
            // height: 134px;
            .title{
                color: @color-Warning;
                line-height: 20px;
                font-size: 14px;
            }
            
            .desc{
                line-height: 20px;
                color: @color-Sub;
                font-size: 12px;
            }
        }

        .content-box{
            margin-top: 20px;
            &.margin-t-0{
                margin-top: 0;
            }
        }
        
        .content-box{
            .c-content{
                .ivu-tabs-bar{
                    margin: 20px 30px 0px;
                    height: 50px;
                    border: none;
                    background: @color-Background;
                    .ivu-tabs-nav-scroll{
                        height: 50px;
                        line-height: 35px;
                        .ivu-tabs-nav{
                            height: inherit;
                        }
                    }
                }
                .ivu-tabs{
                    overflow: unset;
                }
                .standard-table{
                    .table{
                        padding: 0 30px;
                    }
                }
                .h-line{
                    padding: 0 30px;
                    margin-bottom: 30px;
                }
            }
        }
    }
</style>
